<script>
  import sheep from '@/sheep';
  import MpHtml from '@/pages/nc_chat/components/ua2-markdown/mp-html/mp-html.vue';
  import SAvatar from '@/sheep/components/s-avatar/s-avatar.vue';
  import { baseUrl } from '@/sheep/config';
  import calendar from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar';
  import dayjs from 'dayjs';
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import First_popup from '@/pages/family/components/first_popup.vue';
  import SFirstPopup from '@/sheep/components/s-first-popup/s-first-popup.vue';
  import debounce from '@/sheep/helper/debounce';
  import SBetterCalendar from '@/sheep/components/s-better-calendar/s-better-calendar.vue';

  const INIT_DAY_TYPE = 'solar';
  const INIT_DAY_TIMESTAMP = dayjs().valueOf();
  const INIT_DAY = dayjs().format('YYYY-MM-DD');

  export default {
    name: 'familyInfo',
    components: { SBetterCalendar, SFirstPopup, First_popup, ImageAvater, SAvatar, MpHtml },
    data() {
      return {
        // 家庭信息
        familyInfo: {},
        // 选项
        optionsList: [
          { name: '家庭成员' },
          { name: '家风家训' },
          { name: '家庭圈' },
          { name: '家庭相册' },
          { name: '家庭生日' },
          { name: '家庭纪念日' },
        ],
        value: '',
        // 当前选择的类目
        selectIndex: 0,
        // 当前选择的家庭成员
        selectFamilyMember: [],
        // 家庭圈列表
        familyCircleList: [],
        // 获取家庭圈参数
        familyCircleParams: {
          page: 1,
          pagesize: 20,
          total: 0,
        },
        // 家庭相册列表
        familyPhotoList: [],
        // 相册列表
        photoList: {},
        // 获取家庭相册参数
        familyPhotoParams: {
          page: 1,
          pagesize: 100,
          total: 0,
        },
        // 生日列表
        birthdayList: [],
        // 纪念日列表
        anniversaryList: [],
        // 家庭成员弹窗配置
        familyMembersProfileListScroll: {
          scrollLeft: 0,
          allWidth: 0,
          width: 0,
          selectWidth: 0,
        },
        // 家庭成员弹窗头像列表
        familyMembersProfileList: [],
        // 家庭成员当前选择的头像
        selectProfileIndex: 2,
        // 家庭成员名称
        familyPopupFrom: {
          nameBox: '',
          appellation: '',
        },
        // 家风家训编辑内容
        familyTrain: '',
        // 发布家庭圈内容
        pagContent: '',
        // 发布家庭圈照片
        pageImageList: [],
        // 生日详情
        birthdayDetail: {},
        // 生日个人详情
        memberInfo: {},
        // 修改生日详情
        form: {},
        // 修改生日参数
        date: {
          type: INIT_DAY_TYPE, // 类型
          timestamp: INIT_DAY_TIMESTAMP, // 时间戳
          solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
          lunarDate: '', // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
          lunarDateNumber: '', // 农历生日的数字写法（1999-12-25）
          defaultValue: [100, 0, 0], // 默认选中的日期
        },
        // 是否显示编辑生日修改弹窗
        showCalendar: false,
        // 纪念日配置
        memorialDayForm: {
          title: '',
        },
        // 修改纪念日详情
        memorialDate: {
          type: INIT_DAY_TYPE, // 类型
          timestamp: INIT_DAY_TIMESTAMP, // 时间戳
          solarDate: INIT_DAY, // 公历日期 - 文本（2000-1-1）
          lunarDate: '', // 农历日期 - 文本（己卯年冬月廿五(2000-1-1)）
          lunarDateNumber: '', // 农历生日的数字写法（1999-12-25）
          defaultValue: [100, 0, 0], // 默认选中的日期
        },
        memorialShowCalendar: false,
        // 纪念日详情
        memorialDateDetail: {},
        // 纪念日成员详情
        memorialMemberInfo: {},
      };
    },
    props: {
      id: {
        type: [String, Number],
        default: '',
      },
    },
    computed: {
      calendar() {
        return calendar;
      },
      sheep() {
        return sheep;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      // 阳历日期
      solarCalendarDate() {
        if (!!this.form.dateBirth) {
          if (this.date.type == 'lunar') {
            console.log(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]));
            let dt = calendar.lunar2solar(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]), !!this.date.isLeap ? true : false);
            console.log(dt);
            return dayjs(`${dt.cYear}-${dt.cMonth}-${dt.cDay}`).format('YYYY年MM月DD日');
          } else {
            return dayjs(this.form.dateBirth).format('YYYY年MM月DD日');
          }
        } else {
          return '';
        }
      },
      memorialSolarCalendarDate() {
        if (!!this.memorialDayForm.dateBirth) {
          if (this.memorialDate.type == 'lunar') {
            console.log(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]));
            let dt = calendar.lunar2solar(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]), !!this.memorialDayForm.isLeap ? true : false);
            console.log(dt);
            return dayjs(`${dt.cYear}-${dt.cMonth}-${dt.cDay}`).format('YYYY年MM月DD日');
          } else {
            return dayjs(this.memorialDayForm.dateBirth).format('YYYY年MM月DD日');
          }
        } else {
          return '';
        }
      },
      // 阴历日期
      lunarCalendarDate() {
        if (!!this.form.dateBirth) {
          if (this.date.type == 'lunar') {
            let dt = calendar.lunar2solar(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]), !!this.date.isLeap ? true : false);
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          } else {
            let dt = calendar.solar2lunar(Number(this.form.dateBirth.split('-')[0]), Number(this.form.dateBirth.split('-')[1]), Number(this.form.dateBirth.split('-')[2]));
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          }
        } else {
          return '';
        }
      },
      memorialLunarCalendarDate() {
        if (!!this.memorialDayForm.dateBirth) {
          if (this.date.type == 'lunar') {
            let dt = calendar.lunar2solar(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]), !!this.memorialDate.isLeap ? true : false);
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          } else {
            let dt = calendar.solar2lunar(Number(this.memorialDayForm.dateBirth.split('-')[0]), Number(this.memorialDayForm.dateBirth.split('-')[1]), Number(this.memorialDayForm.dateBirth.split('-')[2]));
            return `${dt.gzYear}年 ${calendar.toChinaYear(dt.lYear)}${dt.IMonthCn}${dt.IDayCn}`;
          }
        } else {
          return '';
        }
      },
    },
    watch: {
      id: {
        handler(val) {
          this.getFamilyInfo();
        },
        deep: true,
      },
      familyPhotoList: {
        handler(val) {
          console.log(uni.getWindowInfo());
          console.log(uni.getSystemInfoSync());
          if (sheep.$platform.device.windowWidth < 768) {
            this.photoList = { 0: [], 1: [], 2: [] };
            for (let photo = 0; photo < val.length; photo++) {
              setTimeout(() => {
                this.$nextTick(() => {
                  let arr = [];
                  for (const index in this.photoList) {
                    const query = uni.createSelectorQuery().in(this);
                    query.select(`#photo_${index}`).boundingClientRect((rect) => {
                      arr.push(rect.height);
                    }).exec();
                  }
                  let max = arr[0];
                  let subscript = 0;
                  for (let i = 1; i < arr.length; i++) {
                    if (arr[i] < max) {
                      max = arr[i];
                      subscript = i;
                    }
                  }
                  this.photoList[subscript].push(val[photo]);
                });
              }, 10);
            }
          } else if (sheep.$platform.device.windowWidth < 992) {
            this.photoList = { 0: [], 1: [], 2: [], 3: [] };
            for (let photo = 0; photo < val.length; photo++) {
              setTimeout(() => {
                this.$nextTick(() => {
                  let arr = [];
                  for (const index in this.photoList) {
                    const query = uni.createSelectorQuery().in(this);
                    query.select(`#photo_${index}`).boundingClientRect((rect) => {
                      arr.push(rect.height);
                    }).exec();
                  }
                  let max = arr[0];
                  let subscript = 0;
                  for (let i = 1; i < arr.length; i++) {
                    if (arr[i] < max) {
                      max = arr[i];
                      subscript = i;
                    }
                  }
                  this.photoList[subscript].push(val[photo]);
                });
              }, 10);
            }
          } else if (sheep.$platform.device.windowWidth < 1200) {
            this.photoList = { 0: [], 1: [], 2: [], 3: [], 4: [], 5: [] };
            for (let photo = 0; photo < val.length; photo++) {
              setTimeout(() => {
                this.$nextTick(() => {
                  let arr = [];
                  for (const index in this.photoList) {
                    const query = uni.createSelectorQuery().in(this);
                    query.select(`#photo_${index}`).boundingClientRect((rect) => {
                      arr.push(rect.height);
                    }).exec();
                  }
                  let max = arr[0];
                  let subscript = 0;
                  for (let i = 1; i < arr.length; i++) {
                    if (arr[i] < max) {
                      max = arr[i];
                      subscript = i;
                    }
                  }
                  this.photoList[subscript].push(val[photo]);
                });
              }, 10);
            }
          } else if (sheep.$platform.device.windowWidth < 1920) {
            this.photoList = { 0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: [], 7: [] };
            for (let photo = 0; photo < val.length; photo++) {
              setTimeout(() => {
                this.$nextTick(() => {
                  let arr = [];
                  for (const index in this.photoList) {
                    const query = uni.createSelectorQuery().in(this);
                    query.select(`#photo_${index}`).boundingClientRect((rect) => {
                      arr.push(rect.height);
                    }).exec();
                  }
                  let max = arr[0];
                  let subscript = 0;
                  for (let i = 1; i < arr.length; i++) {
                    if (arr[i] < max) {
                      max = arr[i];
                      subscript = i;
                    }
                  }
                  this.photoList[subscript].push(val[photo]);
                });
              }, 10);
            }
          } else {
            this.photoList = { 0: [], 1: [], 2: [], 3: [], 4: [], 5: [], 6: [], 7: [] };
            for (let photo = 0; photo < val.length; photo++) {
              setTimeout(() => {
                this.$nextTick(() => {
                  let arr = [];
                  for (const index in this.photoList) {
                    const query = uni.createSelectorQuery().in(this);
                    query.select(`#photo_${index}`).boundingClientRect((rect) => {
                      arr.push(rect.height);
                    }).exec();
                  }
                  let max = arr[0];
                  let subscript = 0;
                  for (let i = 1; i < arr.length; i++) {
                    if (arr[i] < max) {
                      max = arr[i];
                      subscript = i;
                    }
                  }
                  this.photoList[subscript].push(val[photo]);
                });
              }, 10);
            }
          }
        },
        deep: true,
      },
      familyMembersProfileListScroll: {
        deep: true,
        handler(newValue, oldValue) {
          this.familyMembersProfileListScroll.scrollLeft = newValue.allWidth - newValue.width / 2 + newValue.selectWidth / 2;
        },
      },
    },
    mounted() {
      // 获取家庭详情
      this.getFamilyInfo();
    },
    methods: {
      dayjs,
      // 获取家庭信息
      async getFamilyInfo() {
        const { data } = await sheep.$api.family.getFamilyCulture({
          family_id: this.id,
        });
        this.familyInfo = data;
        await this.getFamilyMember();
        this.familyCircleList = [];
        await this.getFamilyCircle();
        await this.getBirthday();
        await this.getMemorialDay();
      },
      // 选择类目
      selectList(index) {
        this.selectIndex = index;
        if (index == 3) {
          this.familyPhotoParams.page = 1;
          this.familyPhotoList = [];
          this.getFamilyPhoto();
        }
        if (index == 8) {

        }
      },
      // 获取家庭成员
      async getFamilyMember() {
        const { data } = await sheep.$api.family.getFamilyMemberList({ family_id: this.id, page: 0 });

        this.selectFamilyMember = data;
      },
      // 获取家庭圈
      async getFamilyCircle() {
        const { data } = await sheep.$api.family.getFamilyCircle({
          family_id: this.id,
          page: this.familyCircleParams.page,
          pagesize: this.familyCircleParams.pagesize,
        });
        this.familyCircleParams.total = data.count;
        this.familyCircleList = [...this.familyCircleList, ...data.list];
      },
      // 获取家庭相册
      async getFamilyPhoto() {
        const { data } = await sheep.$api.family.getFamilyImage({
          family_id: this.id,
          page: this.familyPhotoParams.page,
          pagesize: this.familyPhotoParams.pagesize,
        });
        this.familyPhotoParams.total = data.count;
        data.list.forEach(item => {
          this.familyPhotoList.push(item);
        });
      },
      // 上传照片
      async uploadPhoto() {
        const { code, msg } = await sheep.$api.family.checkAuth({
          family_id: this.id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        // #ifndef APP-PLUS
        uni.chooseImage({
          count: 9,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: async (res) => {
            uni.showLoading({
              title: '上传图片中，请稍后',
            });
            let imageList = [];
            let allLength = res.tempFilePaths.length;
            res.tempFilePaths.forEach((item, index1) => {
              // #ifdef H5
              sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, (info) => {
                sheep.$api.family.addFamilyImage({
                  images: [info.fullurl],
                  family_id: this.id,
                  member_id: '',
                }).then(() => {
                  if (index1 == allLength - 1) {
                    this.familyPhotoParams.page = 1;
                    this.familyPhotoList = [];
                    this.getFamilyPhoto();
                  }
                });
                uni.hideLoading();
              });
              // #endif
            });
          },
          fail: (res) => {
            // sheep.$helper.toast('图片大小超过限制，请重新上传');
          },
        });
        // #endif
      },
      // 获取更多照片
      async getMorePhotos() {
        if (this.familyPhotoParams.page * this.familyPhotoParams.pagesize < this.familyPhotoParams.total) {
          this.familyPhotoParams.page++;
          await this.getFamilyPhoto();
        }
      },
      // 获取生日
      async getBirthday() {
        const { data } = await sheep.$api.family.getFamilyBirthday({
          family_id: this.id,
          page: 0,
          type: 1,
        });
        this.birthdayList = [...data.list30, ...data.list30More];
      },
      // 获取纪念日
      async getMemorialDay() {
        const { data } = await sheep.$api.family.getFamilyBirthday({
          family_id: this.id,
          page: 0,
          type: 2,
        });
        this.anniversaryList = [...data.list30, ...data.list30More];
      },
      // 获取年龄
      jsGetAge(strBirthday) {
        let returnAge;
        let strBirthdayArr = strBirthday.split('-');
        let birthYear = strBirthdayArr[0];
        let birthMonth = strBirthdayArr[1];
        let birthDay = strBirthdayArr[2];

        let d = new Date();
        let nowYear = d.getFullYear();
        let nowMonth = d.getMonth() + 1;
        let nowDay = d.getDate();

        if (nowYear == birthYear) {
          returnAge = 0; //同年 则为0岁
        } else {
          let ageDiff = nowYear - birthYear; //年之差
          if (ageDiff > 0) {
            if (nowMonth == birthMonth) {
              let dayDiff = nowDay - birthDay; //日之差
              if (dayDiff < 0) {
                returnAge = ageDiff - 1;
              } else {
                returnAge = ageDiff;
              }
            } else {
              let monthDiff = nowMonth - birthMonth; //月之差
              if (monthDiff < 0) {
                returnAge = ageDiff - 1;
              } else {
                returnAge = ageDiff;
              }
            }
          } else {
            returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
          }
        }

        return returnAge; //返回周岁年龄
      },
      // 添加家庭成员
      async addMember() {
        let { data } = await sheep.$api.family.getDefaultAvatar({ type: 0 });
        this.familyMembersProfileList = data;
        this.$refs.familyMemberPopUp.openPopup({
          title: '添加家庭成员',
          showTitle: false,
          maskClick: false,
          popupBackground: true,
          confirm: async () => {
            if (this.familyPopupFrom.nameBox == '') {
              uni.showToast({
                title: '姓氏尚未填写',
                icon: 'none',
              });
              return;
            }
            if (this.familyPopupFrom.appellation == '') {
              uni.showToast({
                title: '名称尚未填写',
                icon: 'none',
              });
              return;
            }
            const { code, msg } = await sheep.$api.family.addFamilyMember({
              family_id: this.id,
              surname: this.familyPopupFrom.nameBox,
              daimyo: this.familyPopupFrom.appellation,
              avatar: this.familyMembersProfileList[this.selectProfileIndex].avatar,
              gender: this.familyMembersProfileList[this.selectProfileIndex].sex,
            });
            if (code == 1) {
              uni.showToast({
                title: '添加成功',
                icon: 'none',
              });
            } else {
              uni.showToast({
                title: msg,
                icon: 'none',
              });
            }
            this.$refs.familyMemberPopUp.closePopup();
            this.familyPopupFrom.appellation = '';
            this.familyPopupFrom.nameBox = '';
            this.familyList = [];
            this.getFamilyMember();
          },
        });
      },
      // 选择头像
      changeTab(index) {
        this.selectProfileIndex = index;
        setTimeout(() => {
          this.moveTo(index);
        }, 10);
      },
      moveTo(index) {
        const query = uni.createSelectorQuery().in(this);
        query.select('.familyMemberPopUp_scrollView').boundingClientRect(data => {
          this.familyMembersProfileListScroll.width = data.width;
        }).exec();
        query.select('#familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
          this.familyMembersProfileListScroll.selectWidth = rect.width;
        }).exec();
        query.selectAll('.familyMemberPopUp_scrollView_list').boundingClientRect(rect => {
          if (rect.length > 0) {
            this.familyMembersProfileListScroll.allWidth = 0;
            rect.forEach((item, i) => {
              if (i < index) {
                this.familyMembersProfileListScroll.allWidth += Number(item.width);
              }
            });
          }
        }).exec();
      },
      // 设置姓氏
      suernameInput(e) {
        console.log(e);
        if (e.detail.value.length > 1) {
          let arr;
          arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2));
          } else {
            this.$set(this.familyPopupFrom, 'nameBox', '');
          }
        }
      },
      surnameBlur(e) {
        if (e.detail.value.length > 0) {
          let arr;
          arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'nameBox', arr.join('').substring(0, 2));
          } else {
            this.$set(this.familyPopupFrom, 'nameBox', '');
          }
        }
      },
      nameInput(e) {
        if (e.detail.value.length > 1) {
          let arr;
          arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4));
          } else {
            this.$set(this.familyPopupFrom, 'appellation', '');
          }
        }
      },
      nameBlur(e) {
        if (e.detail.value.length > 0) {
          let arr;
          arr = e.detail.value.match(/[\u4e00-\u9fa5]/g);
          if (!!arr) {
            this.$set(this.familyPopupFrom, 'appellation', arr.join('').substring(0, 4));
          } else {
            this.$set(this.familyPopupFrom, 'appellation', '');
          }
        }
      },
      // 编辑家风家训
      editFamilyTraditions() {
        this.familyTrain = this.familyInfo.family_tradition;
        this.$refs.FamilyDiscipline.openPopup({
          title: '编辑家风家训',
          maskClick: false,
          bottomContentWidth: '750rpx',
          showWidth: false,
          confirm: async () => {
            const { code, msg } = await sheep.$api.family.updateFamilyCulture({
              family_id: this.id,
              content: this.familyTrain,
            });
            if (code == 1) {
              this.$refs.FamilyDiscipline.closePopup();
              sheep.$helper.toast('编辑成功');
              await this.getFamilyInfo();
            } else {
              sheep.$helper.toast(msg);
            }
          },
        });
      },
      // 发布家庭圈
      async postMoments() {
        this.$refs.publishFamilyCulture.openPopup({
          title: '发布家庭圈',
          maskClick: true,
          showWidth: false,
          buttonName: '发布家庭圈',
          allWidth: '35vw',
          confirm: async () => {

            if (!this.pagContent) {
              sheep.$helper.toast('请填写家庭趣事生活感悟~');
              return;
            }
            const { code } = await sheep.$api.family.publishFamilyCircle({
              content: this.pagContent,
              family_id: this.id,
              images: this.pageImageList,
              is_sync_family: 1,
              member_id: '',
            });
            console.log(code);
            if (code == 1) {
              sheep.$helper.toast('发布成功');
              this.$refs.publishFamilyCulture.closePopup();
              this.familyCircleList = [];
              this.familyCircleParams.page = 1;
              await this.getFamilyCircle();
            }
          },
        });
      },
      publishFamilyCultureClose() {
        this.$refs.publishFamilyCulture.closePopup();
        this.pageImageList = [];
        this.pagContent = '';
      },
      // 上传家庭圈照片
      async uploadPhotoFamilyCircle() {
        const { code, msg } = await sheep.$api.family.checkAuth({
          family_id: this.id,
          action: 'add',
        });
        if (code != 1) {
          sheep.$helper.toast(msg);
          return;
        }
        // #ifndef APP-PLUS
        uni.chooseImage({
          count: 9 - this.pageImageList.length,
          sizeType: ['original', 'compressed'],
          sourceType: ['album'],
          success: async (res) => {
            uni.showLoading({
              title: '上传图片中，请稍后',
            });
            let imageList = [];
            let allLength = res.tempFilePaths.length;
            res.tempFilePaths.forEach((item, index1) => {
              // #ifdef H5
              sheep.$platform.upload.uploadFile(item, res.tempFiles[index1].size, (info) => {
                this.pageImageList.push(info.fullurl);
                uni.hideLoading();
              });
              // #endif
            });
          },
          fail: (res) => {
            // sheep.$helper.toast('图片大小超过限制，请重新上传');
          },
        });
        // #endif
      },
      // 删除家庭圈照片
      async deleteImage(index) {
        this.pageImageList.splice(index, 1);
      },
      // 获取更多家庭圈
      getMoreFamilyCircleList() {
        if (this.familyCircleParams.page * this.familyCircleParams.pagesize < this.familyCircleParams.total) {
          this.familyCircleParams.page++;
          this.getFamilyCircle();
        }
      },
      // 关闭生日详情
      birthdayDetailsClose() {
        this.$refs.birthdayDetails.closePopup();
      },
      // 开启生日详情
      async familyBirthday(info) {
        if (!info.date) {
          await this.editBirthday(info);
          return;
        }
        let { data } = await sheep.$api.family.getFamilyMemoryDayDetail({
          id: info.id,
        });
        this.birthdayDetail = data;
        let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
        this.memberInfo = memberInfo.data;
        this.$refs.birthdayDetails.openPopup({
          showTitle: false,
          maskClick: true,
          showWidth: false,
          showConfirmButton: false,
        });
      },

      // 关闭生日编辑弹窗
      editBirthdayClose() {
        this.$refs.editBirthday.closePopup();
      },
      // 编辑生日弹窗
      async editBirthday(info) {
        console.log(info);
        this.$refs.birthdayDetails.closePopup();
        this.form.selectId = info.member_id;
        this.form.dateBirth = info.date;
        this.form.selectName = info.member_names;
        this.date.solarDate = info.date;
        this.date.type = info.time_type != 1 ? 'solar' : 'lunar';
        this.date.timestamp = dayjs(info.date).valueOf();
        this.date.defaultValue = info.date != '' ? [info.date.split('-')[0] - 1900, info.date.split('-')[1] - 1, info.date.split('-')[2] - 1] : [100, 0, 0];
        this.date.isLeap = info.is_leap_month == 2 ? true : false;
        this.$refs.editBirthday.openPopup({
          title: '编辑生日',
          maskClick: true,
          showWidth: false,
          allWidth: '25vw',
          confirm: async () => {
            if (this.form.selectId == '') {
              sheep.$helper.toast('请选择家庭成员');
              return;
            }
            if (this.form.dateBirth == '') {
              sheep.$helper.toast('请选择日期');
              return;
            }
            const { code, msg } = await sheep.$api.family.updateFamilyMemberInfo({
              family_id: this.id,
              member_id: this.form.selectId,
              is_leap_month: !this.date.isLeap ? 1 : 2,
              date: this.date.type == 'solar' ? this.date.solarDate : this.date.lunarDateNumber,
              time_type: this.date.type == 'solar' ? 2 : 1,
            });
            if (code == 1) {
              sheep.$helper.toast('设置成功');
              this.birthdayList = [];
              await this.getBirthday();
              this.$refs.editBirthday.closePopup();
            } else {
              sheep.$helper.toast(msg);
            }
          },
        });
      },
      // 编辑生日弹窗选择日期
      openBetterCalendar() {
        if (!!this.form.dateBirth) {
          if (this.date.type == 'lunar') {
            let day = calendar.leapMonth(Number(this.date.defaultValue[0]) + 1900);
            if (!!this.date.isLeap) {
              let arr = [this.date.defaultValue[0], this.date.defaultValue[1] + 1, this.date.defaultValue[2]];
              this.$refs.betterCalendarRef.setPicker(arr, this.date.type, this.date.isLeap);
            } else {
              if (day <= 0) {
                this.$refs.betterCalendarRef.setPicker(this.date.defaultValue, this.date.type, this.date.isLeap);
              } else {
                if (this.form.dateBirth.split('-')[1] > day) {
                  let arr = [this.date.defaultValue[0], this.date.defaultValue[1] + 1, this.date.defaultValue[2]];
                  this.$refs.betterCalendarRef.setPicker(arr, this.date.type, this.date.isLeap);
                } else {
                  if (this.date.isLeap) {
                    let arr = [this.date.defaultValue[0], this.date.defaultValue[1] + 1, this.date.defaultValue[2]];
                    this.$refs.betterCalendarRef.setPicker(arr, this.date.type, this.date.isLeap);
                  } else {
                    this.$refs.betterCalendarRef.setPicker(this.date.defaultValue, this.date.type, this.date.isLeap);
                  }
                }

              }
            }
          } else {
            let arr = [];
            arr[0] = Number(this.form.dateBirth.split('-')[0] - 1900);
            arr[1] = Number(this.form.dateBirth.split('-')[1]) - 1;
            arr[2] = Number(this.form.dateBirth.split('-')[2]) - 1;
            this.$refs.betterCalendarRef.setPicker(arr, this.date.type, false);
          }
        }
        this.showCalendar = true;
      },
      // 编辑纪念日弹窗选择日期
      async openBetterCalendarMemorial() {
        if (!!this.memorialDayForm.dateBirth) {
          if (this.memorialDate.type == 'lunar') {
            let day = calendar.leapMonth(Number(this.memorialDate.defaultValue[0]) + 1900);
            if (!!this.memorialDate.isLeap) {
              let arr = [this.memorialDate.defaultValue[0], this.memorialDate.defaultValue[1] + 1, this.memorialDate.defaultValue[2]];
              this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, this.memorialDate.isLeap);
            } else {
              if (day <= 0) {
                this.$refs.memorialDay.setPicker(this.memorialDate.defaultValue, this.memorialDate.type, this.memorialDate.isLeap);
              } else {
                if (this.memorialDayForm.dateBirth.split('-')[1] > day) {
                  let arr = [this.memorialDate.defaultValue[0], this.memorialDate.defaultValue[1] + 1, this.memorialDate.defaultValue[2]];
                  this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, this.memorialDate.isLeap);
                } else {
                  if (this.memorialDate.isLeap) {
                    let arr = [this.memorialDate.defaultValue[0], this.memorialDate.defaultValue[1] + 1, this.memorialDate.defaultValue[2]];
                    this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, this.memorialDate.isLeap);
                  } else {
                    this.$refs.memorialDay.setPicker(this.memorialDate.defaultValue, this.memorialDate.type, this.memorialDate.isLeap);
                  }
                }

              }
            }
          } else {
            let arr = [];
            arr[0] = Number(this.memorialDayForm.dateBirth.split('-')[0] - 1900);
            arr[1] = Number(this.memorialDayForm.dateBirth.split('-')[1]) - 1;
            arr[2] = Number(this.memorialDayForm.dateBirth.split('-')[2]) - 1;
            this.$refs.memorialDay.setPicker(arr, this.memorialDate.type, false);
          }
        }
        this.memorialShowCalendar = true;
      },
      // 选择日期
      selectDate(e) {
        console.log(e);
        this.date.type = e.type;
        this.date.timestamp = dayjs(e.solarDate).valueOf();
        this.date.solarDate = e.solarDate;
        this.date.lunarDate = e.lunarDate;
        this.date.lunarDateNumber = e.lunarDateNumber;
        this.date.isLeap = e.isLeap; // 一年里是否有闰月
        this.form.dateBirth = e.type == 'lunar' ? e.lunarDateNumber : e.solarDate;
        // this.date.type = e.type == 'lunar' ? 1 : 2
        this.showCalendar = false;
        this.date.defaultValue = e.selectValue;
      },
      // 选择纪念日日期
      selectMemorialDate(e) {
        this.memorialDate.type = e.type;
        this.memorialDate.timestamp = dayjs(e.solarDate).valueOf();
        this.memorialDate.solarDate = e.solarDate;
        this.memorialDate.lunarDate = e.lunarDate;
        this.memorialDate.lunarDateNumber = e.lunarDateNumber;
        this.memorialDate.isLeap = e.isLeap; // 一年里是否有闰月
        this.memorialDayForm.dateBirth = e.type == 'lunar' ? e.lunarDateNumber : e.solarDate;
        // this.date.type = e.type == 'lunar' ? 1 : 2
        this.memorialShowCalendar = false;
      },
      // 关闭纪念日弹窗
      editMemorialDayClose() {
        this.$refs.editMemorialDay.closePopup();
      },
      // 选择纪念日
      async anniversaryDetails(info, index) {
        console.log(info);
        if (!info.date) {
          await this.editMemorialDay(info);
          return;
        }
        const { data } = await sheep.$api.family.getFamilyMemoryDayDetail({
          id: info.id,
        });
        this.memorialDateDetail = data;
        let memberInfo = await sheep.$api.family.getFamilyMemberDetail({ member_id: this.birthdayDetail.member_id });
        this.memorialMemberInfo = memberInfo.data;

        this.$refs.memorialDetails.openPopup({
          showTitle: false,
          maskClick: true,
          showWidth: false,
          showConfirmButton: false,
        });
      },
      // 开启编辑纪念日弹窗
      async editMemorialDay(options) {
        this.$refs.memorialDetails.closePopup();
        console.log(options);
        this.memorialDayForm.title = options.name;
        this.memorialDayForm.selectId = options.member_id;
        this.memorialDayForm.dateBirth = options.date;
        this.memorialDayForm.selectName = options.username;
        this.memorialDayForm.anniversaryId = options.id;
        this.memorialDate.solarDate = options.date;
        this.memorialDate.member_id = options.member_id;
        this.memorialDate.type = options.time_type != 1 ? 'solar' : 'lunar';
        this.memorialDate.timestamp = dayjs(options.date).valueOf();
        this.memorialDate.defaultValue = options.date != '' && options.date != null ? [options.date.split('-')[0] - 1900, options.date.split('-')[1] - 1, options.date.split('-')[2] - 1] : [100, 0, 0];
        this.memorialDate.isLeap = options.isLeapMonth == 2 ? true : false;
        this.$refs.editMemorialDay.openPopup({
          title: '编辑纪念日',
          maskClick: true,
          showWidth: false,
          allWidth: '30vw',
          confirm: async () => {
            const { code } = await sheep.$api.family.updateFamilyMemoryDay({
              id: this.memorialDayForm.anniversaryId,
              name: this.memorialDayForm.title,
              members: this.memorialDayForm.selectId,
              member_id: this.memorialDate.member_id,
              is_leap_month: !this.memorialDate.isLeap ? 1 : 2,
              date: this.memorialDate.type == 'solar' ? this.memorialDate.solarDate : this.memorialDate.lunarDateNumber,
              time_type: this.memorialDate.type == 'solar' ? 2 : 1,
              type: 2,
            });
            if (code == 1) {
              await this.getMemorialDay();
              sheep.$helper.toast('设置成功');
              this.$refs.editMemorialDay.closePopup();
            }
          },
        });
      },
      // 关闭纪念日详情弹窗
      memorialClose() {
        this.$refs.memorialDetails.closePopup();
      },
      // 查看个人主页
      viewPersonalHomepage(info) {
        sheep.$router.go('/pages/familyPage/memberDetails', {
          id: info.id,
          family_id: this.id,
        });
      },
    },
  };
</script>

<template>
  <view style="width: 100%;margin-top: 10px;border-radius: 8px;height: 100%;position: absolute;top: 0;left: 0"
        class="bg_FFFFFF flex flex-column align-center"
  >
    <view style="width: 100%;border-bottom: 1px solid #E8E8E8;padding: 20px 0"
          class="flex align-center justify-between"
    >
      <view class="flex align-end"
            style="margin-left: 20px;"
      >
        <view style="font-size: 28px;color: #363636;font-weight: 500;">
          {{ familyInfo.name }}
        </view>
        <view style="color: #5C5C5C;font-weight: 500;font-size: 20px;margin-left: 10px;">
          家庭号: {{ familyInfo.family_id }}
        </view>
      </view>
      <view class="flex align-center justify-center"
            style="width: 85px;height: 30px;border: 1px solid #BCBCBC;border-radius: 15px;margin-right: 20px;cursor:pointer;"
            @click.stop="addMember"
      >
        <image :src="`${IMG_URL}/index/pc_familyCulture_add.png`" style="width: 15px;height: 15px;"></image>
        <view style="font-weight: 500;font-size: 11px;color: #363636;margin-left: 5px;">
          新建成员
        </view>
      </view>
    </view>
    <uni-row style="width: 100%;border-bottom: 1px solid #E8E8E8;">
      <uni-col :xs="24" :sm="24" :lg="12" :xl="9" class="flex align-center justify-center" style="padding: 20px 0">
        <view class="flex align-center justify-between" style="width: 98%">
          <view
            style="font-size: 20px;color: #6F6F6F;font-weight: 500;border-radius: 8px 8px 8px 8px;border: 1px solid #DBDBDB;padding:5px 10px;cursor:pointer;"
            v-for="(item,index) in optionsList"
            :key="index"
            :style="{
              color: selectIndex == index ? '#FFFFFF' : '#6F6F6F',
              background: selectIndex == index ? '#FF4206' : 'transparent',
              border: selectIndex == index ? '1px solid #FF4206' : '1px solid #DBDBDB',
            }"
            @click.stop="selectList(index)"
          >
            {{ item.name }}
          </view>
        </view>
      </uni-col>
      <uni-col :xs="24" :sm="24" :lg="12" :xl="15" style="padding: 20px 0">
        <view class="flex align-center justify-end" style="margin-right: 20px;">
          <view
            style="width: 148px;height: 30px;border-radius: 15px;overflow: hidden;border: 1px solid #BCBCBC;margin-right: 20px;"
            class="flex align-center"
          >
            <input type="text" v-model="value" placeholder="搜索" style="margin-left: 10px;">
            <text class="iconfont icon-ic_search" style="margin-right: 15rpx;cursor:pointer;"></text>
          </view>
          <view style="color: #6F6F6F;font-size: 20px;font-weight: 500;margin-left: 10px;cursor:pointer;">
            统计
          </view>
          <view style="color: #6F6F6F;font-size: 20px;font-weight: 500;margin-left: 10px;cursor:pointer;">
            日志
          </view>
          <view style="color: #6F6F6F;font-size: 20px;font-weight: 500;margin-left: 10px;cursor:pointer;"
                @click.stop="selectList(8)"
                :style="{
                  color:selectIndex == 8 ? '#FF4206' : '#6F6F6F',
                }"
          >
            设置
          </view>
        </view>
      </uni-col>
    </uni-row>
    <view style="width: 99%;overflow-y: scroll;flex: 1;" class="flex">
      <!-- 家庭成员 -->
      <uni-row v-if="selectIndex == 0"
               style="width: 100%;height: 100%;overflow-y: scroll;margin-top: 10px;">
        <uni-col :xs="6" :sm="6" :lg="4" :xl="3"
                 v-for="(item,index) in selectFamilyMember"
                 :key="index"
                 class="flex flex-column align-center"
                 style="margin-bottom: 10px;"
        >
          <view style="width: 90%;box-shadow: 0px 2px 2px 1px rgba(0,0,0,0.08);border-radius: 8px;"
                class="flex flex-column align-center"
                :style="{
                  background: item.gender == 1 ? '#F2F7FF' : '#FFF2F2',
                }"
          >
            <image :src="item.avatar.indexOf('http') != -1 ? item.avatar : `${nc_image}${item.avatar}`"
                   style="width: 79px;height: 79px;border-radius: 50%;margin-top: 8px;"
            ></image>
            <view style="font-size: 24px;color: #363636;font-weight: 500;margin-top: 10px;">
              {{ item.username || item.remark }}
            </view>
            <view class="flex align-center justify-center"
                  style="background: #FFFFFF;border-radius: 15px;font-size: 12px;color: #6A6A6A;font-weight: 500;padding: 5px 20px;margin-top: 10px;cursor:pointer;"
                  @click.stop="viewPersonalHomepage(item)"
            >
              个人主页
            </view>
            <view style="height: 10px;"></view>
            <!--            <view style="width: 100%;padding:10px 0;" class="flex align-center justify-around">-->
            <!--              <view style="font-size: 12px;color: #363636;font-weight: 500;">相册</view>-->
            <!--              <view style="font-size: 12px;color: #363636;font-weight: 500;">圈子</view>-->
            <!--              <view style="font-size: 12px;color: #363636;font-weight: 500;">声音</view>-->
            <!--            </view>-->
          </view>
        </uni-col>
      </uni-row>
      <!-- 家风家训 -->
      <uni-row v-if="selectIndex == 1"
               style="width: 100%;overflow-y: scroll;margin-top: 10px;" class="flex-sub">
        <view class="familyCulture_bg flex align-center justify-center" style="width: 100%;height: 100%;">
          <view class="familyCulture_content flex align-center justify-center"
                style="width: 90%;height: 90%;position: relative">
            <view style="width: 50%;height: 60%;overflow-y: scroll">
              <textarea v-model="familyInfo.family_tradition" disabled
                        style="font-weight: 600;font-size: 16px;color: #696969;white-space: pre-wrap;height: 100%"
              ></textarea>
            </view>
            <view
              style="border-radius: 15px;background: #FFFFFF;border: 1px solid #BCBCBC;padding: 5px 10px;position: absolute;bottom: 40px;left: 50%;transform: translateX(-50%);cursor:pointer;"
              class="flex align-center justify-center"
            >
              <image style="width: 12px;height: 12px;" :src="`${IMG_URL}/index/pc_familyCulture_add.png`"></image>
              <view style="font-size: 11px;font-weight: 500;color: #363636;margin-left: 5px;"
                    @click.stop="editFamilyTraditions"
              >
                编辑
              </view>
            </view>
          </view>
        </view>
      </uni-row>
      <!-- 家庭圈 -->
      <view v-if="selectIndex == 2"
            scroll-y="true"
            style="width: 100%;height: 100%;margin-top: 10px;"
      >
        <uni-row style="width: 100%;min-height: 52vh;"
                 class="flex align-center justify-center"
        >
          <uni-col :xs="24" :sm="24" :lg="12" :xl="12"
                   style="min-height: 52vh;background: #F8F8F8;position: relative"
          >
            <scroll-view scroll-y="true"
                         style="width: 100%;position: absolute;left: 50%;transform: translateX(-50%);top: 0;height: 100%;"
                         class="flex flex-column align-center"
                         @scrolltolower="getMoreFamilyCircleList"
            >
              <view v-for="(item,index) in familyCircleList"
                    :key="index"
                    style="width: 80%;margin-top: 10px;border-radius: 8px;margin: 0 auto"
                    class="bg_FFFFFF"
              >
                <view class="flex align-start"
                      style="width: 100%;margin-top: 10px;padding-bottom: 10px;border-bottom: 1px solid #E8E8E8;">
                  <view style="margin-left: 10px;">
                    <image style="width: 70px;height: 70px;border-radius: 50%;" v-if="item.circle"
                           :src="item.circle.member_avatar.indexOf('http') != -1 ?item.circle.member_avatar : `${nc_image}${item.circle.member_avatar}`"
                    ></image>
                  </view>
                  <view class="flex flex-column"
                        style="margin-left: 10px;margin-right: 10px;width: 100%"
                  >
                    <view class="flex align-center justify-between"
                          style="font-weight: 500;font-size: 28px;color: #000000"
                    >
                      <view class="flex align-center">
                        <text class="familyCircle_all_right_name_text">
                          {{ !!item.circle.member_surname && !!item.circle.member_daimyo ? `${item.circle.member_surname}${item.circle.member_daimyo}` : item.circle.member_remark
                          }}
                        </text>
                        <!--                        <view class="familyCircle_all_right_name_label ml_10 flex align-center justify-center"-->
                        <!--                              v-if="!!item.circle.member_surname && !!item.circle.member_daimyo">-->
                        <!--                          <text class="familyCircle_all_right_name_label_text">{{ item.circle.member_remark }}</text>-->
                        <!--                        </view>-->
                      </view>
                      <text class="iconfont icon-ic_more"></text>
                    </view>
                    <text class="familyCircle_all_right_time_text"
                          style="font-weight: 500;font-size: 22px;color: #898989;margin-top: 5px;"
                    >
                      {{ item.circle.timeAgo }}
                    </text>
                    <view style="color: #0F0F0F;font-size: 21px;font-weight: 500;margin-top: 10px;">
                      <mp-html :content="item.circle.content" class="familyCircle_all_right_content_text"></mp-html>
                    </view>
                  </view>
                </view>
                <view class="flex align-center justify-center"
                      style="margin-bottom: 10px;margin-top: 10px;"
                >
                  <view class="familyCircle_all_right_operationList_thumbsUp flex flex-column align-center"
                        style="margin-right: 10px;"
                  >
                    <image class="familyCircle_all_right_operationList_thumbsUp_image"
                           style="width: 28px;height: 28px;"
                           :src="item.circle.is_like != 1 ? `${IMG_URL}/index/thumbsUp.png`:`${IMG_URL}/index/thumbsUp_select.png`"
                    ></image>
                    <text style="font-size: 11px;color: #3B3B3B;font-weight: 400;margin-top: 5px;">
                      爱心 {{ item.circle.like_count }}
                    </text>
                    <!--                    <image :src="`${IMG_URL}/index/dianzan_gif.gif`" class="gif"></image>-->
                  </view>
                  <view class="familyCircle_all_right_operationList_comments flex flex-column align-center"
                        style="margin-left: 10px;"
                        @click.stop="familyCircleReview(info,1)">
                    <image class="familyCircle_all_right_operationList_comments_image"
                           style="width: 28px;height: 28px;"
                           :src="`${IMG_URL}/index/jiating_gengduoIcon.png`"></image>
                    <text style="font-size: 11px;color: #3B3B3B;font-weight: 400;margin-top: 5px;">
                      评论 {{ item.circle.comment_count }}
                    </text>
                  </view>
                </view>
              </view>
            </scroll-view>
            <view
              style="position: absolute;right: -21px;width: 42px;height: 110px;background: #FF440A;border-radius: 19px 19px 19px 19px;bottom: 0;cursor:pointer;"
              class="flex align-center flex-column justify-center"
              @click.stop="postMoments"
            >
              <image :src="`${IMG_URL}/index/pc_family_release.png`"
                     style="width: 13px;height: 13px;"
              ></image>
              <view style="font-weight: 500;font-size: 22px;color: #FFFFFF;width: 22px;">
                发布
              </view>
            </view>
          </uni-col>
        </uni-row>
      </view>
      <!-- 家庭相册 -->
      <scroll-view v-if="selectIndex == 3"
                   scroll-y="true"
                   style="width: 100%;height: 100%;margin-top: 10px;"
                   @scrolltolower="getMorePhotos"
      >
        <uni-row style="width: 100%;min-height: 52vh;margin-top: 10px;">
          <uni-col :span="24" class="flex align-center justify-end" style="margin-bottom: 10px;">
            <view style="width: 90px;height: 32px;background: #F6F7FB;border-radius: 15px 15px 15px 15px;"
                  class="flex align-center justify-center"
                  @click.stop="uploadPhoto"
            >
              <image :src="`${IMG_URL}/index/pc_familyCulture_add.png`" style="width: 15px;height: 15px;"></image>
              <view style="font-weight: 500;font-size: 11px;color: #363636;cursor:pointer;">
                上传照片
              </view>
            </view>
            <view class="flex align-center justify-center"
                  style="width: 90px;height: 32px;background: #F6F7FB;border-radius: 15px 15px 15px 15px;font-weight: 500;font-size: 11px;color: #363636;margin-left: 10px;cursor:pointer;"
            >
              批量编辑
            </view>
          </uni-col>
          <uni-col v-for="(item,index) in photoList" :key="index"
                   :xs="8" :sm="6" :md="4" :lg="3" :xl="3"
                   class="flex flex-column align-center"
                   style="margin-bottom: 10px;"
                   :id="`photo_${index}`"
          >
            <image v-for="item2 in item" :src="item2.image"
                   style="width: 96%;border-radius: 8px 8px 8px 8px;cursor:pointer;margin-bottom: 10px;"
                   mode="widthFix"
            ></image>
          </uni-col>
        </uni-row>
      </scroll-view>
      <!-- 家庭生日 -->
      <scroll-view v-if="selectIndex == 4"
                   scroll-y="true"
                   style="width: 100%;height: 100%;margin-top: 10px;"
      >
        <uni-row style="width: 100%;min-height: 52vh;margin-top: 10px;">
          <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8"
                   v-for="(item,index) in birthdayList" :key="index"
                   class="flex align-center justify-center"
                   style="margin-bottom: 10px;"
                   @click.stop="familyBirthday(item)"
          >
            <view style="width: 98%;background: #F6F7FB;border-radius: 8px;cursor:pointer;padding: 10px 0"
                  class="flex"
            >
              <view style="width: 25%;border-radius: 4px;"
                    class="flex align-center justify-center"
              >
                <image
                  :src="item.member_avatar.indexOf('http') != -1 ? item.member_avatar : `${nc_image}${item.member_avatar}`"
                  style="width: 100%;border-radius: 4px;margin-left: 10px;"
                  mode="widthFix"
                  v-if="!!item.member_avatar"
                ></image>
              </view>
              <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-if="!!item.date">
                <view class="flex align-end">
                  <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.member_username }}</view>
                  <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                    {{ jsGetAge(item.date_type == 2 ? item.date : item.gregorian_date) }}周岁
                  </view>
                  <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                    {{ item.member_sex == 1 ? '男' : '女' }}
                  </view>
                  <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                    星座: {{ calendar.toAstro(dayjs(item.gregorian_date).month(), dayjs(item.gregorian_date).day()) }}
                  </view>
                </view>
                <view style="font-size: 18px;font-weight: 400;color: #0F0F0F;margin-top: 10px;">
                  <view>出生日期:
                    <text :style="{color:item.date_type == 2 ? '#FF4206':'#0F0F0F'}">
                      {{ dayjs(item.gregorian_date).format('YYYY年MM月DD日') }}
                    </text>
                    <text :style="{color:item.date_type == 2 ? '#0F0F0F':'#FF4206'}" style="margin-left: 10px;">
                      {{ item.lunar_date }}
                    </text>
                  </view>
                  <view style="margin-top: 10px;">下次生日:
                    <text :style="{color:item.date_type == 2 ? '#FF4206':'#0F0F0F'}">
                      {{ dayjs(item.countdown.date).format('YYYY年MM月DD日') }}
                    </text>
                    <text :style="{color:item.date_type == 2 ? '#0F0F0F':'#FF4206'}" style="margin-left: 10px;">
                      {{ item.countdown.mDay }}
                    </text>
                  </view>
                </view>
                <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-top: 10px;"
                      class="flex align-end justify-end"
                      v-if="item.countdown.day != 0"
                >
                  距离
                  <text style="color: #FF4206;">{{ jsGetAge(item.date_type == 2 ? item.date : item.gregorian_date) + 1
                    }}
                  </text>
                  周岁还有
                  <text style="color: #FF4206;font-size: 24px;">{{ item.countdown.day }}</text>
                  天
                </view>
                <view v-else class="flex align-center justify-end">
                  <text style="color: #FF4206;font-size: 24px;">今天</text>
                </view>
              </view>
              <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-else>
                <view class="flex align-end">
                  <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.member_username }}</view>
                  <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-left: 5px;">
                    {{ item.member_sex == 1 ? '男' : '女' }}
                  </view>
                </view>
                <view style="width: 100%;margin-top: 20px;" class="flex  align-center justify-center">
                  <view class="jiluyixia flex flex-column align-center justify-between"
                        style="background: #ff4206;border-radius: 8px;width: 50%; "
                  >
                    <view class="left flex align-center">
                      <image :src="`${IMG_URL}/index/jiating_jiluyixia_icon.png`"
                             style="width: 15px;height: 15px;"></image>
                      <view class="wenzi color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                        记录一下
                      </view>
                    </view>
                    <view class="right color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                      唯有亲情最相思
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </scroll-view>
      <!-- 家庭纪念日 -->
      <scroll-view v-if="selectIndex == 5"
                   scroll-y="true"
                   style="width: 100%;height: 100%;margin-top: 10px;"
      >
        <uni-row style="width: 100%;margin-top: 10px;flex-wrap: wrap" class="flex">
          <uni-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8"
                   v-for="(item,index) in anniversaryList" :key="index"
                   class="flex"
                   style="margin-bottom: 10px;"
                   @click="anniversaryDetails(item,index)"
          >
            <view style="width: 98%;background: #F6F7FB;border-radius: 8px;cursor:pointer;padding: 10px 0"
                  class="flex"
            >
              <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-if="!!item.date">
                <view class="flex align-end">
                  <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.name }}</view>
                </view>
                <view style="font-size: 18px;font-weight: 400;color: #0F0F0F;margin-top: 10px;">
                  <view>日期:
                    <text :style="{color:item.date_type == 2 ? '#FF4206':'#0F0F0F'}">
                      {{ dayjs(item.gregorian_date).format('YYYY年MM月DD日') }}
                    </text>
                    <text :style="{color:item.date_type == 2 ? '#0F0F0F':'#FF4206'}">{{ item.lunar_date }}</text>
                  </view>
                </view>
                <view style="font-size: 18px;font-weight: 400;color: #0F0F0F;margin-top: 10px;"
                      class="flex align-center"
                >
                  成员:
                  <view v-for="member in item.member_names.split(',')"
                        style="margin-left: 10px;"
                  >
                    {{ member }}
                  </view>
                </view>
                <view style="font-size: 14px;font-weight: 400;color: #0F0F0F;margin-top: 10px;"
                      class="flex align-end justify-end"
                      v-if="item.countdown.day != 0"
                >
                  距离
                  <text style="color: #FF4206;">{{ jsGetAge(item.date_type == 2 ? item.date : item.gregorian_date) + 1
                    }}
                  </text>
                  周年还有
                  <text style="color: #FF4206;font-size: 24px;">{{ item.countdown.day }}</text>
                  天
                </view>
                <view v-else class="flex align-center justify-end">
                  <text style="color: #FF4206;font-size: 24px;">今天</text>
                </view>
              </view>
              <view class="flex flex-column flex-sub" style="margin-left: 10px;margin-right: 10px;" v-else>
                <view class="flex align-end">
                  <view style="font-size: 24px;font-weight: 500;color: #363636;">{{ item.name }}</view>
                </view>
                <view style="width: 100%;margin-top: 20px;" class="flex  align-center justify-center">
                  <view class="jiluyixia flex flex-column align-center justify-between"
                        style="background: #ff4206;border-radius: 8px;width: 50%; "
                  >
                    <view class="left flex align-center">
                      <image :src="`${IMG_URL}/index/jiating_jiluyixia_icon.png`"
                             style="width: 15px;height: 15px;"></image>
                      <view class="wenzi color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                        记录一下
                      </view>
                    </view>
                    <view class="right color_FFFFFF" style="font-size: 24px;font-weight: 500;color: #363636;">
                      唯有亲情最相思
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </uni-col>
        </uni-row>
      </scroll-view>
      <!-- 家庭设置 -->
      <scroll-view style="width: 100%;height: 100%;" v-if="selectIndex == 8">
        <view class="flex flex-column align-center" style="width: 100%;height: 100%;">
          <view class="flex align-center" style="padding: 15px 0;width: 100%;">
            <view style="font-size: 24px;color:#7C7C7C;font-weight: 500;">家庭名称</view>
            <view class="flex align-center" style="margin-left: 15px;">
              <view style="font-size: 24px;color:#363636;font-weight: 500;">{{ familyInfo.name }}</view>
              <view class="flex align-center" style="margin-left: 10px;cursor:pointer;">
                <text class="iconfont icon-ic_edit color_FF4206" style="font-size: 16px"></text>
                <view style="font-size: 16px;color: #363636;margin-left: 5px;">编辑</view>
              </view>
            </view>
            <view style="font-size: 24px;color:#7C7C7C;font-weight: 500;margin-left: 50px;">家庭号</view>
            <view class="flex align-center" style="margin-left: 15px;">
              <view style="font-size: 24px;color:#363636;font-weight: 500;">{{ familyInfo.family_id }}</view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 家庭成员弹窗 -->
    <s-first-popup ref="familyMemberPopUp">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              添加家庭成员
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <scroll-view :scroll-left="familyMembersProfileListScroll.scrollLeft" :scroll-x="true"
                       class="familyMemberPopUp_scrollView mt_32"
                       scroll-with-animation>
            <view :id="selectProfileIndex == index ? 'familyMemberPopUp_scrollView_list':''"
                  class="familyMemberPopUp_scrollView_list" v-for="(item,index) in familyMembersProfileList" :style="{
              padding:index == 0 ? '0 12rpx 0 0':index == familyMembersProfileList.length?'0 0 0 12rpx':'0 12rpx'
            }" :key="index" @click="changeTab(index)">
              <image-avater id="imageAvater" :width="selectProfileIndex == index?111 : 78"
                            :height="selectProfileIndex == index? 111 : 78" :src="`${nc_image}${item.avatar}`"
                            :is-order="selectProfileIndex == index"
                            :border-width="4" border-color="#FF4206"></image-avater>
            </view>
          </scroll-view>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="familyPopupFrom.nameBox" placeholder="尊姓"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="suernameInput"
                     @blur="surnameBlur">
            </view>
            <view class="familyMemberPopUp_editInfo_right flex align-center justify-center">
              <input type="text" v-model="familyPopupFrom.appellation" placeholder="大名"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder" @input="nameInput" @blur="nameBlur">
            </view>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 家风家训 -->
    <s-first-popup ref="FamilyDiscipline">
      <template #content>
        <view style="width: 30vw;margin-top: 20rpx;margin-bottom: 20rpx;" class="flex align-center flex-column">
          <view
            style="height: 30vh;overflow-y: scroll;width: 90%;border-radius: 8px;background: #F5F5F5;padding: 10px 20px">
            <textarea style="width: 100%;min-height: calc(30vh - 20px);"
                      :maxlength="-1"
                      auto-height
                      v-model="familyTrain"
            ></textarea>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 发布家庭圈 -->
    <s-first-popup ref="publishFamilyCulture" @closePopup="publishFamilyCultureClose">
      <template #content>
        <view style="width: 30vw;height: 30vh;padding: 10px 20px">
          <view class="familyCircleDetails_content"
                style="height: 30vh;background: #F5F5F5;overflow: hidden;width: 30vw;border-radius: 8px;padding: 10px 0;"
          >
            <textarea v-model="pagContent"
                      class="familyCircleDetails_content_textarea"
                      :placeholder="`家庭趣事生活感悟～`"
                      auto-height :maxlength="500"
                      style="min-height: calc(30vh - 20px);max-height: calc(30vh - 20px);width: calc(30vw - 40px);margin-left: 20px;margin-right: 20px;overflow: hidden"
            ></textarea>
          </view>
        </view>
        <view class="familyCircleDetails_tips flex align-center justify-between " style="margin-top: 20px;width: 90%;">
          <view class="familyCircleDetails_tips_left ml_20">
            <text class="familyCircleDetails_tips_left_text">
              最多可输入500字
            </text>
          </view>
          <view class="familyCircleDetails_tips_right mr_20">
            <text class="familyCircleDetails_tips_right_text">
              {{ `${pagContent.length}/500` }}
            </text>
          </view>
        </view>
        <view class="familyCircleDetails_imageList mt_30" style="width: 90%;">
          <view class="familyCircleDetails_imageList_content flex align-center" style="flex-wrap: wrap">
            <view class="familyCircleDetails_imageList_content_list flex flex-column align-center justify-center"
                  v-for="(item,index) in pageImageList" :key="index" @click="previewImage(item)">
              <view class="del z_1" @click.stop="deleteImage(index)">
                <image :src="`${IMG_URL}/index/delete_release.png`" style="width: 41rpx;height: 41rpx;"></image>
              </view>
              <image :src="item" class="familyCircleDetails_imageList_content_list_imageList" mode="aspectFill"></image>
            </view>
            <view class="familyCircleDetails_imageList_content_list flex flex-column align-center justify-center"
                  v-if="pageImageList.length < 9" @click="uploadPhotoFamilyCircle">
              <image :src="`${IMG_URL}/index/image_release.png`" style="width: 20px;height: 20px;"
                     class="familyCircleDetails_imageList_content_list_image"></image>
              <text class="familyCircleDetails_imageList_content_list_text mt_15">添加照片</text>
            </view>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 生日详情 -->
    <s-first-popup ref="birthdayDetails" @closePopup="birthdayDetailsClose">
      <template #content>
        <view style="width: 30vw;height: 70vh;position: relative" class="familyBirthBg flex flex-column align-center">
          <view class="hW_221"></view>
          <view>
            <template v-if="!!memberInfo">
              <image-avater :width="84" :height="84" :src="`${memberInfo.avatar}`"></image-avater>
            </template>
            <template v-else>
              <view class="wh_84 hW_84">
                <image :src="`${birthdayDetail.avatar}`" class="wh_84 hW_84" style="border-radius: 50%"></image>
              </view>
            </template>
          </view>
          <view class="hW_15"></view>
          <view class="dayDetail_birthday_name">
            <text class="dayDetail_birthday_name_text" style="font-size: 40rpx;color: #323232;">
              {{ birthdayDetail.name }}
            </text>
          </view>
          <view class="hW_15"></view>
          <view class="dayDetail_birthday_timeDetails flex align-center justify-center">

            <text class="dayDetail_birthday_timeDetails_text" style="font-size: 24rpx;" :style="{
          color:birthdayDetail.date_type != 1 ? '#000000':'#E05E5B'
        }">
              {{ birthdayDetail?.detail?.gregorian_date }}
            </text>
            <text class="dayDetail_birthday_timeDetails_text ml_10" style="font-size: 24rpx;" :style="{
                      color:birthdayDetail.date_type != 1 ? '#E05E5B':'#000000'
                    }">
              {{ (birthdayDetail?.detail?.ganzhi_year + birthdayDetail?.detail?.lunar_date)
              }}
            </text>
            <text class="dayDetail_birthday_timeDetails_text  ml_10" style="font-size: 24rpx;color: #E05E5B;"
                  v-if="!!birthdayDetail.detail">
              {{ dayjs(birthdayDetail?.detail?.gregorian_year).format('dddd') }}
            </text>
          </view>
          <view class="hW_44"></view>
          <view style="font-size: 36rpx;color: #E05E5B;font-weight: 500;">
            生日快乐
          </view>
          <view class="hW_9"></view>
          <image :src="`${IMG_URL}/index/happyBirthday.png`" style="width: 371rpx;height: 122rpx;"></image>
          <view class="hW_11"></view>
          <view class="dayDetail_birthday_timeDetails_title">
            <text class="dayDetail_birthday_timeDetails_title_text" style="font-size: 27rpx;color: #E05E5B;">{{
                Number(birthdayDetail?.detail?.full_year.split('周岁')[0]) + 1 }}岁生日倒计时
            </text>
          </view>
          <view class="dayDetail_birthday_timeDetails_day">
            <template v-if="birthdayDetail.countdownDay > 0">
              <text class="dayDetail_birthday_timeDetails_day_text" style="color: #E05E5B;">
                {{ birthdayDetail.countdownDay
                }}
              </text>
              <text class="dayDetail_birthday_timeDetails_day_unit ml_10" style="color: #E05E5B;">天</text>
            </template>
            <template v-else-if="birthdayDetail.countdownDay == 0">
              <text class="dayDetail_birthday_timeDetails_day_text" style="color: #E05E5B;">今天</text>
            </template>
          </view>
          <view class="dayDetail_birthday_nextTimeDetails flex align-center justify-center">
            <text class="dayDetail_birthday_timeDetails_text" style="font-size: 24rpx;color: #000000;font-weight: 500;">
              {{ dayjs(birthdayDetail.countdown.date).format('YYYY年MM月DD日')
              }} {{
                birthdayDetail.countdown.mDay }} {{ dayjs(birthdayDetail.countdown.date).format('dddd') }}
            </text>
          </view>
          <view class="hW_103"></view>
          <view class="dayDetail_birthday_operation flex align-center justify-center" style="cursor:pointer;"
                @click.stop="editBirthday(birthdayDetail)"
          >
            <text class="dayDetail_birthday_operation_text">编辑生日</text>
          </view>
        </view>
      </template>
    </s-first-popup>
    <!-- 编辑生日 -->
    <s-first-popup ref="editBirthday" @closePopup="editBirthdayClose">
      <template #content>
        <view class="birthday_date flex align-center justify-center mt_25"
              style="width: 90%;"
              v-if="!!form.dateBirth"
              @click.stop="openBetterCalendar"
        >
          <text class="birthday_date_text"
                :style="{
                  color:date.type == 'lunar' ? '#9F9F9F' : '#000000'
                }"
          >
            {{ solarCalendarDate }}
          </text>
          <text class="birthday_date_text ml_10"
                :style="{
                  color:date.type == 'lunar' ? '#000000' : '#9F9F9F'
                }"
          >
            {{ lunarCalendarDate }}
          </text>
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" style="width: 90%;" v-else>
          点击设置日期
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" style="width: 90%;">
          <text class="birthday_date_text">{{ !!form.selectName ? form.selectName : '点击选择家庭成员' }}</text>
        </view>
        <view class="birthday_tips flex flex-column" style="width: 90%;">
          <text class="birthday_tips_text mt_9">提示：</text>
          <text class="birthday_tips_text mt_9">1.首页只能为家庭成员添加生日或纪念日</text>
          <text class="birthday_tips_text mt_9">2.非家庭成员如需要添加生日请在我的里面进行添加</text>
        </view>
      </template>
    </s-first-popup>
    <!-- 纪念日详情 -->
    <s-first-popup ref="memorialDetails" @closePopup="memorialClose">
      <template #content>
        <view class="dayDetail_anniversary">
          <image class="dayDetail_anniversary_iconFirst" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <image class="dayDetail_anniversary_iconSecond" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <image class="dayDetail_anniversary_iconThird" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <image class="dayDetail_anniversary_iconFourth" :src="`${IMG_URL}/index/anniversary_icon.png`"></image>
          <view class="dayDetail_anniversary_avatar">
            <image-avater :src="`${nc_image}${birthdayDetail.avatar}`" :width="96" :height="96"
                          :mode="'widthFix'"></image-avater>
          </view>
          <view class="dayDetail_anniversary_name">
            <text class="dayDetail_anniversary_name_text">{{ birthdayDetail.name }}</text>
          </view>
          <template v-if="memorialDateDetail.countdownDay>0">
            <view class="dayDetail_anniversary_identity">
              <text class="dayDetail_anniversary_identity_text">还有</text>
            </view>
            <view class="dayDetail_anniversary_day">
              <text class="dayDetail_anniversary_day_text">{{ memorialDateDetail.countdownDay }}</text>
            </view>
            <view class="dayDetail_anniversary_unit">
              <text class="dayDetail_anniversary_unit_text">天</text>
            </view>
          </template>
          <template v-else>
            <view class="dayDetail_anniversary_day">
              <text class="dayDetail_anniversary_day_text">今天</text>
            </view>
          </template>
          <view class="dayDetail_anniversary_timeDetails flex align-center justify-center">
            <text class="dayDetail_anniversary_timeDetails_text" style="color: #000000">
              {{ dayjs(memorialDateDetail.countdown?.date).format('YYYY年MM月DD日')
              }} {{
                memorialDateDetail.countdown?.mDay }} {{ dayjs(memorialDateDetail.countdown?.date).format('dddd') }}
            </text>
          </view>
          <view class="dayDetail_anniversary_bottomButton flex align-center justify-center"
                @click.stop="editMemorialDay(memorialDateDetail)">
            <text class="dayDetail_anniversary_bottomButton_text">编辑纪念日</text>
          </view>
          <image :src="`${IMG_URL}/index/down_background.png`" class="dayDetail_anniversary_downBackground"></image>
          <!--      <image :src="`${IMG_URL}share.png`" class="dayDetail_anniversary_shareIcon"></image>-->
        </view>
      </template>
    </s-first-popup>
    <!-- 编辑纪念日 -->
    <s-first-popup ref="editMemorialDay" @closePopup="editMemorialDayClose">
      <template #content>
        <view class="birthday_date flex align-center justify-center mt_25">
          <input type="text" class="birthday_date_input" v-model="memorialDayForm.title"
                 placeholder="点击输入纪念日标题"
                 placeholder-class="birthday_date_placeholder" style="text-align: center">
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" @click.stop="openBetterCalendarMemorial"
              v-if="!!memorialDayForm.dateBirth">
          <text class="birthday_date_text" :style="{
        color:memorialDate.type == 'lunar' ? '#9F9F9F' : '#000000'
      }">
            {{ memorialSolarCalendarDate }}
          </text>
          <text class="birthday_date_text ml_10" :style="{
        color:memorialDate.type == 'lunar' ? '#000000' : '#9F9F9F'
      }">
            {{ memorialLunarCalendarDate }}
          </text>
        </view>
        <view class="birthday_date flex align-center justify-center mt_25" @click.stop="openBetterCalendarMemorial"
              v-else>
          点击设置日期
        </view>
        <view class="birthday_date flex align-center justify-center mt_25">
          <text class="birthday_date_text">{{ !!memorialDayForm.selectName ? memorialDayForm.selectName : '点击选择家庭成员'
            }}
          </text>
        </view>
        <view class="birthday_tips flex flex-column">
          <text class="birthday_tips_text mt_9">提示：</text>
          <text class="birthday_tips_text mt_9">1.首页只能为家庭成员添加生日或纪念日</text>
          <text class="birthday_tips_text mt_9">2.非家庭成员如需要添加生日请在我的里面进行添加</text>
        </view>
      </template>
    </s-first-popup>

    <!-- 编辑生日弹窗时间 -->
    <s-better-calendar class="z-999"
                       ref="betterCalendarRef"
                       :maxYear="new Date().getFullYear()"
                       :default-type="date.type"
                       :default-value="date.defaultValue"
                       :showCalendar="showCalendar"
                       :isLeap="date.isLeap"
                       @confirm="selectDate"
                       @cancel="showCalendar = false"
    ></s-better-calendar>
    <!-- 编辑纪念日弹窗时间 -->
    <s-better-calendar class="z-999"
                       ref="memorialDay"
                       :maxYear="new Date().getFullYear()"
                       :default-type="memorialDate.type"
                       :default-value="memorialDate.defaultValue"
                       :showCalendar="memorialShowCalendar"
                       :isLeap="memorialDate.isLeap"
                       @confirm="selectMemorialDate"
                       @cancel="memorialShowCalendar = false"
    ></s-better-calendar>
  </view>
</template>

<style scoped lang="scss">
  .familyCulture_bg {
    background: url($uni-bg-url-sq + "/index/pc_familyCulture_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .familyCulture_content {
    background: url($uni-bg-url-sq + "/index/pc_familyCulture_content.png") no-repeat;
    background-size: 100% 100%;
  }

  .familyMemberPopUp {
    width: 506rpx;


    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .familyCircleDetails_imageList {
    width: 702rpx;

    .familyCircleDetails_imageList_content {
      //width: 596rpx;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 10rpx;
      grid-row-gap: 10rpx;

      .familyCircleDetails_imageList_content_list {
        width: 192rpx;
        height: 192rpx;
        background: #F5F5F5;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        overflow: hidden;
        position: relative;

        .del {
          position: absolute;
          right: 0;
          top: 0;
        }

        .familyCircleDetails_imageList_content_list_imageList {
          max-width: 192rpx;
          max-height: 192rpx;
        }

        .familyCircleDetails_imageList_content_list_image {
          width: 66rpx;
          height: 66rpx;
        }

        .familyCircleDetails_imageList_content_list_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #A0A0A0;
        }
      }
    }
  }

  .familyBirthBg {
    background: url($uni-bg-url-sq + "/index/birthdayBackground01.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 43rpx 43rpx 43rpx 43rpx;
  }

  .dayDetail_anniversary_iconFirst {
    position: absolute;
    top: 21rpx;
    right: 44rpx;
    width: 375rpx;
    height: 306rpx;
  }

  .dayDetail_anniversary_iconSecond {
    position: absolute;
    top: 310rpx;
    left: 64rpx;
    width: 199rpx;
    height: 162rpx;
  }

  .dayDetail_anniversary_iconThird {
    position: absolute;
    top: 723rpx;
    right: 144rpx;
    width: 80rpx;
    height: 65rpx;
  }

  .dayDetail_anniversary_iconFourth {
    position: absolute;
    top: 632rpx;
    right: 24rpx;
    width: 155rpx;
    height: 127rpx;
  }

  .dayDetail_anniversary_identity {
    position: absolute;
    top: 750rpx;
    left: 50%;
    transform: translateX(-50%);

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_day {
    position: absolute;
    top: 766rpx;
    left: 50%;
    transform: translateX(-50%);

    .dayDetail_anniversary_day_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 98rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_unit {
    position: absolute;
    top: 897rpx;
    left: 50%;
    transform: translateX(-50%);

    .dayDetail_anniversary_unit_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 20rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_timeDetails {
    position: absolute;
    top: 945rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 497rpx;
    height: 51rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 26rpx 26rpx 26rpx 26rpx;
    border: 2rpx solid #FFFFFF;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary_bottomButton {
    position: absolute;
    top: 1032rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 166rpx;
    height: 48rpx;
    background: #FFFFFF;
    border-radius: 36rpx 36rpx 36rpx 36rpx;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 25rpx;
      color: #FF4206;
    }
  }

  .dayDetail_anniversary_downBackground {
    position: absolute;
    bottom: 38rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 77rpx;
    height: 77rpx;
  }

  .dayDetail_anniversary_shareIcon {
    width: 50rpx;
    height: 50rpx;
    position: absolute;
    right: 44rpx;
    top: 47rpx;
  }

  .dayDetail_birthday_timeDetails_content {
    position: absolute;
    top: 565rpx;
    left: 50%;
    transform: translateX(-50%);
    padding: 21rpx 28rpx;
    width: 662rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #FFFFFF;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_birthday_operation {
    width: 124rpx;
    height: 37rpx;
    background: #E05E5B;
    border-radius: 19rpx 19rpx 19rpx 19rpx;


    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 25rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_birthday_timeDetails {
    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_birthday_nextTimeDetails {
    width: 519rpx;
    height: 45rpx;
    border-radius: 21rpx 21rpx 21rpx 21rpx;
    border: 2rpx solid #EC6B68;

    &_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: red;
    }
  }

  .dayDetail_birthday_timeDetails_day_unit {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #FFFFFF;
  }

  .dayDetail_birthday_timeDetails_day_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 127rpx;
    color: #FFFFFF;
  }

  .birthday_date {
    width: 702rpx;
    height: 80rpx;
    background: #EEEEEE;
    border-radius: 40rpx 40rpx 40rpx 40rpx;

    .birthday_date_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_tips {
    width: 702rpx;

    .birthday_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_tips {
    width: 702rpx;

    .birthday_tips_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #9F9F9F;
    }
  }

  .birthday_bottomButton {
    width: 362rpx;
    height: 80rpx;
    background: #FF4206;
    border-radius: 41rpx 41rpx 41rpx 41rpx;

    .birthday_bottomButton_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #FFFFFF;
    }
  }

  .dayDetail_anniversary {
    width: 750rpx;
    height: 80vh;
    background: linear-gradient(180deg, #5C98E7 0%, #CEE0F9 100%);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    position: relative;


    .dayDetail_anniversary_iconFirst {
      position: absolute;
      top: 21rpx;
      right: 44rpx;
      width: 375rpx;
      height: 306rpx;
    }

    .dayDetail_anniversary_iconSecond {
      position: absolute;
      top: 310rpx;
      left: 64rpx;
      width: 199rpx;
      height: 162rpx;
    }

    .dayDetail_anniversary_iconThird {
      position: absolute;
      top: 723rpx;
      right: 144rpx;
      width: 80rpx;
      height: 65rpx;
    }

    .dayDetail_anniversary_iconFourth {
      position: absolute;
      top: 632rpx;
      right: 24rpx;
      width: 155rpx;
      height: 127rpx;
    }

    .dayDetail_anniversary_avatar {
      position: absolute;
      top: 579rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 96rpx;
      height: 96rpx;
    }

    .dayDetail_anniversary_name {
      position: absolute;
      top: 681rpx;
      left: 50%;
      transform: translateX(-50%);

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_identity {
      position: absolute;
      top: 750rpx;
      left: 50%;
      transform: translateX(-50%);

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_day {
      position: absolute;
      top: 766rpx;
      left: 50%;
      transform: translateX(-50%);

      .dayDetail_anniversary_day_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 98rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_unit {
      position: absolute;
      top: 897rpx;
      left: 50%;
      transform: translateX(-50%);

      .dayDetail_anniversary_unit_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_timeDetails {
      position: absolute;
      top: 945rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 497rpx;
      height: 51rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 26rpx 26rpx 26rpx 26rpx;
      border: 2rpx solid #FFFFFF;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #FFFFFF;
      }
    }

    .dayDetail_anniversary_bottomButton {
      position: absolute;
      top: 1032rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 166rpx;
      height: 48rpx;
      background: #FFFFFF;
      border-radius: 36rpx 36rpx 36rpx 36rpx;

      &_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 25rpx;
        color: #FF4206;
      }
    }

    .dayDetail_anniversary_downBackground {
      position: absolute;
      bottom: 38rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 77rpx;
      height: 77rpx;
    }

    .dayDetail_anniversary_shareIcon {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      right: 44rpx;
      top: 47rpx;
    }
  }
</style>